<!DOCTYPE HTML>
<html>
<head>
	<meta charset = "utf-8" />
	<meta name = "format-detection" content = "telephone = no" />
	<meta name = "msapplication-tap-highlight" content = "no" />
	<meta name = "viewport" content = "user-scalable = no, initial-scale = 1, maximum-scale = 1, minimum-scale = 1, width = device-width" />
	<link rel="stylesheet" type="text/css" href="css/kxian.css"/>
	<link rel = "stylesheet" href = "css/index.css"/>
	<script type="text/javascript" src="jquery-3.2.1.min.js"></script>

	<title>详情</title>
</head>

<body>
	<div style="width: 100%;background: #1d1e23;">
		<header>
			<div class="fanhui">
				<img src="../static/img/jiantou.png"/>
			</div>
			<div class="tc">
				<div class="f18 mt-15">
					小恒指
				</div>
		
				<div class="f12">
					<span>非交易时段&nbsp;(只提供行情，不提供交易)</span>
					<span style="display: none;">交易中&nbsp;(交易时间9:00-15:00)</span>
					<span style="display: none;">未开盘&nbsp;(交易时间15:00-9:00)</span>
				</div>
			</div>
			<div class="tixing">
				<img src="../static/img/naozhong.png"/>
			</div>
		</header>
		
		
		
		<div class="section01 w100" style="font-size:14px !important;">
			<div class="sec_top hidden w100" style="padding: 0px 0px 0px 0px;">
				<div class="top_child1 w35 fl">
					<div class="colorGreen f35 line-2">36101</div>
					<div class="colorGreen f12"><span class="inline_block mr10">-881</span><span>-2.82%</span></div>
				</div>
				<div class="top_child2 w60 fl hidden color999 f12">
					<div class="w50 fl">
						<div>最高<span class="inline_block ml10 colorGreen">30315.02</span></div>
						<div class="mt6">最低<span class="inline_block ml10 colorGreen">29855</span></div>
						<div class="mt6">波动<span class="inline_block ml10 color_ef">874</span></div>
					</div>
					<div class="wi40 fr pl11">
						<div>今开<span class="inline_block ml10 colorGreen">30316.02</span></div>
						<div class="mt6">昨收<span class="inline_block ml10 color_ef">30151</span></div>
						<div class="mt6">涨速<span class="inline_block ml10 color_ef">21</span></div>
					</div>
				</div>
			</div>
		</div>
		
		
		
		
		
		
		
		<div class="mm">
			<div class="mm1">
				<span class="f10 cgre"><div class="fl">36101</div><div class="bk-r fl f10">买入</div></span>
				<span class="f10 cred fr"><div class="fr">36101</div><div class="fl bk-g">卖出</div></span>
			</div>
		</div>
		
		<div class="inp tc ">
			<input type="text" id="aa" value="22222" disabled="disabled"/>
			交易量
       		<input type="text" id="bb" value="22222" disabled="disabled"/>
		</div>

		<div class="num">
			<div id="num1">
				50.00%
			</div>
			<div id="num2">
				<div style="float: right;">50.00%</div>
			</div>
		</div>
	</div>
	
	<div class="foot w100" style="position: fixed;bottom: 0px;left: 0px;" id="mai">
		<div class="w20 fl bgcolor_gre h100">
			<div class="fast_buy bgBox"></div>
			<div class="f10 tc c_f" id="anniu1">闪电交易</div>
		</div>
		<div class="w40 fl buy_btn tc bgcolor_red f18" id="maiz">买涨</div>
		<div class="w40 fl buy_btn tc bgcolor_blu f18" id="maid">买跌</div>
	</div>
	
	<div class="foot w100" style="position: fixed;bottom: 0px;left: 0px;display:none;" id="shanmai">
		<div class="w20 fl bgcolor_gre h100">
			<div class="iconfocus bgBox"></div>
			<div class="f10 tc c_y" id="anniu2">闪电交易</div>
		</div>
		<div class="w40 fl buy_btn tc bgcolor_red f18">闪电买涨</div>
		<div class="w40 fl buy_btn tc bgcolor_blu f18">闪电买跌</div>
	</div>
	
	<!--购买弹出框-->
			<div class="order w100 color666 borderbox" id="yincang">
				<h2 class="guanbi" id="guanbi">x</h2>
				<div class="pro_item f10 borderbox">
					<div>14:29自动平仓，涨10个点，赚10港币</div>
					<div class="mt5">当前汇率：1港币=0.90人民币</div>
				</div>
				
				<div class="pro_price f12 borderbox">
					<div>开仓价<span class="inline_block chengse fr">34644</span></div>
				</div>
				<div class="pro_count">
					<div class="order_count hidden mb15">
						<div class="w30 fl">交易数量</div>
						<div class="w70 fl hidden tc">
							<div class="count_btn ml10 fr" id="xz">10手</div>
							<div class="count_btn ml10 fr">5手</div>
							<div class="count_btn ml10 fr">3手</div>
							<div class="count_btn ml10 fr">2手</div>
							<div class="count_btn fr hand">1手</div>
						</div>
					</div>
					<div class="pro_point hidden f12 borderbox">
						<div class="w50 fl point_left">
							<div>触发止损点数
								<span class="que_icon inline_block tc" id="icon1">?</span>
								<div id="a1" class="absolute mtk">
									<img src="../static/img/smschufazhisundianshu.png"/>
									<h2 id="b1">x</h2>
								</div>
								<select class="choose">
									<option value="volvo">10</option>
									<option value="saab">20</option>
									<option value="opel">30</option>
								</select>
							</div>
							<div>触发止盈点数
								<span class="que_icon inline_block tc" id="icon2">?</span>
								<div id="a2" class="absolute mtk">
									<img src="../static/img/wenhao2@2x.png"/>
									<h2 id="b2">x</h2>
								</div>
								<span class="set_po inline_block">
									<input class="point_input" type="number" maxlength="2"/>
								</span>
							</div>
						</div>
						<div class="w50 fl borderbox point_right">
							<div>触发止损金额
								<span class="que_icon inline_block tc" id="icon3">?</span>
								<div id="a3" class="absolute mtk">
									<img src="../static/img/wsmszzhisundianshu.png"/>
									<h2 id="b3">x</h2>
								</div>
								<span class="colorGreen f12">-270.0</span>
							</div>
							<div>触发止盈金额
								<span class="que_icon inline_block tc" id="icon4">?</span>
								<div id="a4" class="absolute mtk">
									<img src="../static/img/wenhao3@2x.png"/>
									<h2 id="b4">x</h2>
								</div>
								<span class="set_po inline_block">
									<input class="point_input" type="number" maxlength="2"/>
								</span>
							</div>
						</div>
					</div>
					<div class="foc">
						<label><input type="radio" name="66" >触发止盈</label>
						<label><input type="radio" name="66">不触发止盈</label>
					</div>
					<div class="cover wz0">
						<span class="foc_choose inline_block tc">√</span>
						<span class="inline_block">移动保本</span>
						<span class="que_icon inline_block tc" id="icon5">?</span>
								<div id="a5" class="absolute mtk">
									<img src="../static/img/wenhao4@2x.png"/>
									<h2 id="b5">x</h2>
								</div>
						<div class="wz1">
							<span class="inline_block">移动点数</span>
							<span class="set_po inline_block mr10">
								<input class="point_input" type="number" maxlength="2"/>
							</span>
							<span class="inline_block">保本点数</span>
							<span class="set_po inline_block">
								<input class="point_input" type="number" maxlength="2"/>
							</span>
						</div>
					</div>
					<div class="balance">
						<span class="inline_block mr10">当前余额</span>
						<span class="f12 colororange">1.00元</span>
						<span class="inline_block fr recharge f12">去充值</span>
					</div>
					<div class="total f12">
						<span>交易费用80.0+保证金650.0=</span>
						<span class="colorred">合计730.0</span>
						<div class="btnBox mt30">
							<div class="bgchengse color_ef br5 tc">确定买涨</div>
						</div>
					</div>
				</div>
			</div>
			
			
	<div class = "trade-chart">
		<div class = "chart-type">
			<span class = "trend">分时</span>
			<span class = "k" data-type = "min,1">1分</span>
			<span class = "k" data-type = "min,5">5分</span>
			<span class = "k" data-type = "min,15">15分</span>
			<span class = "k" data-type = "min,30">30分</span>
			<span class = "k" data-type = "min,60">60分</span>
			<span class = "k" data-type = "min,120">120分</span>
			<span class = "k" data-type = "day">日K</span>
		</div>

		<div class = "chart-container">
			<span class = "switch"></span>

			<canvas class = "chart"></canvas>
			<canvas class = "detail"></canvas>
		</div>

		<div class = "detail-container">
			<div class = "data-detail trend">
				<span class = "time" data-title = "时间：">--</span>
				<span class = "price" data-title = "价格：">--</span>
				<span class = "avgPrice" data-title = "均价：">--</span>
				<span class = "volume" data-title = "成交量：">--</span>
			</div>
			<div class = "data-detail k">
				<span class = "time" data-title = "时间：">--</span>
				<span class = "open-price" data-title = "开盘价：">--</span>
				<span class = "high-price" data-title = "最高价：">--</span>
				<span class = "low-price" data-title = "最低价：">--</span>
				<span class = "close-price" data-title = "收盘价：">--</span>
				<span class = "volume" data-title = "成交量：">--</span>
				<span class = "amount" data-title = "涨跌：">--</span>
				<span class = "percentage" data-title = "涨跌幅：">--</span>
			</div>
		</div>
	</div>
	
	<div class="detail_list borderbox posia w95">
			<div class="detail_type f14 mt10 mb15">
				<span class="color999 guize" id="mingxi">明细</span>
				<span class="color999 ml10 c_fff" id="guize">规则</span>
			</div>
			<div id="mingxi1">
				<div class="detail_title hidden f12 color999 mb15">
					<div class="w40 fl">时间</div>
					<div class="w30 fl tr">价位</div>
					<div class="w30 fl tc">现手</div>
				</div>
				<div class="detail_title hidden f12 mb10">
					<div class="w40 fl color_ef">14:33:55</div>
					<div class="w30 fl tr">3341</div>
					<div class="w30 fl tc">42</div>
				</div>
				<div class="detail_title hidden f12 mb10">
					<div class="w40 fl color_ef">14:33:55</div>
					<div class="w30 fl tr">3341</div>
					<div class="w30 fl tc">42</div>
				</div>
				<div class="detail_title hidden f12 mb10">
					<div class="w40 fl color_ef">14:33:55</div>
					<div class="w30 fl tr">3341</div>
					<div class="w30 fl tc">42</div>
				</div>
				<div class="detail_title hidden f12 mb10">
					<div class="w40 fl color_ef">14:33:55</div>
					<div class="w30 fl tr">3341</div>
					<div class="w30 fl tc">42</div>
				</div>
			</div>
			<div id="guize1" style="display: none;">
				
				<div class="tableguize f14 fir_span">
					<span class="w25 inline_block tc ta_span">货币单位</span>
					<span class="w70 inline_block tc">单行文字</span>
				</div>
				
				<div class="tableguize f14">
					<span class="w25 inline_block tc ta_span">交易单位</span>
					<span class="w70 inline_block tc">单行文字</span>
				</div>
				
				<div class="tableguize f14">
					<span class="w25 inline_block tc ta_span">交易所</span>
					<span class="w70 inline_block tc">单行文字</span>
				</div>
				
				<div class="tableguize f14">
					<span class="w25 inline_block tc ta_span">最小波动</span>
					<span class="w70 inline_block tc">单行文字</span>
				</div>
				
				<div class="tableguize f14">
					<span class="w25 inline_block tc ta_span">浮动盈亏</span>
					<span class="w70 inline_block tc">单行文字</span>
				</div>
				
				<div class="tableguize f14">
					<span class="w25 inline_block tc ta_span">履约保证金</span>
					<span class="w70 inline_block tc">单行文字</span>
				</div>
				
				<div class="tableguize f14">
					<span class="w25 inline_block tc ta_span">综合交易费</span>
					<span class="w70 inline_block tc">单行文字</span>
				</div>
				
				<div class="tableguize1 f14">
					<span class="w25 inline_block tc ta_span">
						交易时间
					</span>
					<span class="w65 inline_block tc" id="xis">每周一至周五上午9:00～11:30，下午13:30～15:00，以及交易所公布的其他时间</span>

				</div>
				
				<div class="tableguize2 f14">
					<span class="w25 inline_block tc ta_span">清仓时间</span>
					<span class="w70 inline_block tc">
						当天收市停止交易前三分钟清仓（14：57）
					</span>
				</div>
				
				<div class="tableguize2 f14">
					<span class="w25 inline_block tc ta_span">
						汇率
					</span>
					<span class="w70 inline_block tc" id="xias">
						1美元=7人民币(汇率波动较大时，将会进行调整)
					</span>
				</div>
				
				<div class="que">
					<div class="que_title f15"><i class="inline_block ora fl"></i>XX如何兑换成人民币</div>
					<div class="que_con f131">1小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指</div>
				</div>
				<div class="que">
					<div class="que_title f15"><i class="inline_block ora fl"></i>XX如何兑换成人民币</div>
					<div class="que_con f131">2小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指</div>
				</div>
				<div class="que">
					<div class="que_title f15"><i class="inline_block ora fl"></i>XX如何兑换成人民币</div>
					<div class="que_con f131">3小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指</div>
				</div>
				<div class="que">
					<div class="que_title f15"><i class="inline_block ora fl"></i>XX如何兑换成人民币</div>
					<div class="que_con f131">4小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指</div>
				</div>
				<div class="que">
					<div class="que_title f15"><i class="inline_block ora fl"></i>XX如何兑换成人民币</div>
					<div class="que_con f131">5小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指小恒指</div>
				</div>
				<div style="width: 100%;height: 50px">
					
				</div>
			</div>
		</div>

	<script type = "text/javascript" src = "js/plugin/hammer.min.js"></script>
	<script type = "text/javascript" src = "js/plugin/trade-chart.1.0.0B1-201805051710.min.js"></script>
	<script type = "text/javascript" src = "js/main/trade-chart/util.js"></script>
	<script type = "text/javascript" src = "js/main/trade-chart/define.chartState.js"></script>
	<script type = "text/javascript" src = "js/main/trade-chart/define.trendChartDataManager.js"></script>
	<script type = "text/javascript" src = "js/main/trade-chart/define.trendChart.js"></script>
	<script type = "text/javascript" src = "js/main/trade-chart/define.kChartDataManager.js"></script>
	<script type = "text/javascript" src = "js/main/trade-chart/define.kChart.js"></script>
	<script type = "text/javascript" src = "js/main/trade-chart/init.js"></script>
	<script type = "text/javascript" src = "js/main/trade-chart/action.trendChart.view-detail.js"></script>
	<script type = "text/javascript" src = "js/main/trade-chart/action.kChart.view-detail.js"></script>
	<script type = "text/javascript" src = "js/main/trade-chart/action.js"></script>
	<script type = "text/javascript" src = ""></script>

	<script src="jindutiao.js"></script>
	<script type = "text/javascript">
	;(function(){
		Date.prototype.Format = function (fmt){
			var o = {
				"M+": this.getMonth() + 1, //月份
				"d+": this.getDate(), //日
				"H+": this.getHours(), //24小时
				"h+": this.getHours()%12 == 0 ? 12 : this.getHours()%12, //12小时
				"m+": this.getMinutes(), //分
				"s+": this.getSeconds(), //秒
				"q+": Math.floor((this.getMonth() + 3) / 3), //季度
				"S": this.getMilliseconds() //毫秒
			};
			if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
			for (var k in o)
				if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
			return fmt;
		};

		var chartState = window.chartState;
		chartState.setCurrentSymbol("SCau0001");
	})();
	
	$("#anniu1").click(function(){
		  $("#shanmai").show();
		  $("#mai").hide();
		});
		
		$("#anniu2").click(function(){
		  $("#shanmai").hide();
		  $("#mai").show();
		});
		
	$("#maiz").click(function(){
		$("#yincang").show();
		});
//		叉号
		$("#guanbi").click(function(){
		  $("#yincang").hide();
		});
		
//		上左
		$("#b1").click(function(){
		  $("#a1").hide();
		});
		
		$("#icon1").click(function(){
		  $("#a1").show();
		});
		
		
//		上右
		$("#b2").click(function(){
		  $("#a2").hide();
		});
		
		$("#icon2").click(function(){
		  $("#a2").show();
		});
		
		
//		下左
		$("#b3").click(function(){
		  $("#a3").hide();
		});
		
		$("#icon3").click(function(){
		  $("#a3").show();
		});
		
		
//		下右
		$("#b4").click(function(){
		  $("#a4").hide();
		});
		
		$("#icon4").click(function(){
		  $("#a4").show();
		});
		
		
//		最后一个
		$("#b5").click(function(){
		  $("#a5").hide();
		});
		
		$("#icon5").click(function(){
		  $("#a5").show();
		});
		
		
		$("#mingxi").click(function(){
            $("#guize1").hide();
            $("#mingxi1").show();
        });

        $("#guize").click(function(){
            $("#mingxi1").hide();
            $("#guize1").show();
        });
        
        
        $("#mingxi").click(function(){
            $("#mingxi").addClass("guize");
        	$("#guize").removeClass("guize");
        });
        $("#guize").click(function(){
            $("#guize").addClass("guize");
        	$("#mingxi").removeClass("guize");
        });
        
        
        $("#tis").click(function(){
		  $("#tis").hide();
		});
		
		$("#xis").click(function(){
		  $("#tis").show();
		});
		
		
		
		 $("#tish").click(function(){
		  $("#tish").hide();
		});
		
		$("#xias").click(function(){
		  $("#tish").show();
		});
		
		
		
       
	</script>
</body>
</html>